<template>
	<view class="perfectBox">
		<view class="perfectBox-title">
			<view class="topText">完善信息</view>
			<view class="topText">审核通过成功入住</view>
			<view class="topTitle">"填写正确的信息有助于快速通过审核"</view>
		</view>
		<view class="perfectFrom">
			<div class="inpBox">

				<h3>您的邮箱账号:</h3>
				<div class="drop-down">
					<uv-input placeholder="邮箱账号" v-model="valuea">
						<!-- vue3模式下必须使用v-slot:suffix -->
						<template v-slot:suffix>
							<uv-code ref="uCode" @change="codeChange" seconds="20" changeText="X秒重新获取哈哈哈"></uv-code>
							<uv-button @click="getCode" :text="tips" type="success" size="mini"></uv-button>
						</template>
					</uv-input>
				</div>
			</div>
			<div class="inpBox">

				<h3>请输入验证码:</h3>
				<div class="drop-down">
					<uv-input placeholder="请输入内容" border="surround" v-model="value" @change="change"></uv-input>
				</div>
			</div>
			<div class="inpBox">
				<h3>请输入密码:</h3>
				<div class="drop-down" @click="openPickers">
					<uv-input type="password" suffixIcon="eye-off" placeholder="请输入内容" v-model="val"
						@change="change"></uv-input>
				</div>

			</div>
			<div class="inpBox">
				<h3>请再次输入密码:</h3>
				<div class="drop-down" @click="openPicker">
					<uv-input type="number" suffixIcon="eye-fill" placeholder="请输入内容" v-model="values"
						@change="changes"></uv-input>

				</div>
			</div>
			<button class="btnStyle" @click="goTonext">下一步</button>
		</view>
	</view>
</template>

<script>
	import {
		toast
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	export default {
		data() {
			return {
				tips: '',
				valuea: '2805361239@qq.com',
				value: '',
				paw: '',
				paws: ''
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',

					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						toast('验证码已发送');
						this.value = Math.floor(1000 + Math.random() * 9000)
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					toast('倒计时结束后再发送');
				}
			},
			change(e) {
				console.log('change', e);
				this.paw = e
			},
			changes(e) {
				console.log('change', e);
				this.paws = e
			},

			goTonext() {
				if (this.value == '') {
					uni.showModal({
						content: "请完善信息"
					})
				} else if (this.paw != this.paws) {
					uni.showModal({
						content: "密码不一致"
					})
				} else if (this.paw.length != 8) {
					uni.showModal({
						content: "密码必须8位"
					})
				} else {
					uni.navigateTo({
						url: "/pages/Perfectthree/Perfectthree"
					})
				}
			}
		}
	}
</script>

<style>
	.btnStyle {
		background: #4191ec;
		color: aliceblue;
		border-radius: 30rpx;
	}

	.inpBox {
		margin-top: 75rpx;
		margin-bottom: 80rpx;
	}

	.drop-down {
		margin-top: 30rpx;
	}

	.perfectBox {
		width: 675rpx;
		padding: 40rpx 35rpx;
	}

	.topText {
		font-weight: 600;
		font-size: 45rpx;
		color: #4191ec;
		margin-bottom: 20rpx;
	}

	.topTitle {
		font-weight: 600;
		font-size: 22rpx;
		color: #e98072;
		margin-bottom: 30rpx;
	}
</style>